<template id="arrive_one">
    <div>
           <p class="p_one" v-if="this.one_time.length>0">- 1小时达 -</p>
            <ul class="arrive_one_u" v-if="this.one_time.length>0">
                <li  v-for="(time_1,index) in one_time" @click="get_one(index)">{{time_1}}</li>
            </ul>
          <p class="p_two" v-if="this.two_time.length>0">- 准时达 -</p>
            <ul class="arrive_one_u1" v-if="this.two_time.length>0">
               <li  v-for="(time_2,index) in two_time" @click="get_two(index)">{{time_2}}</li>
            </ul>
    </div>
</template>
<script>
    /*<!--v-bind:style="styleHead"-->*/
    export default{
        name: 'arrive_one',
        data(){
            return{
                /*两小时达和一小时达的字段*/
                one_time:[],
                two_time:[],
            }
        },
        mounted:function(){
            //请求一小时达和两小时达接口
            this.$http.jsonp(
                this.GLOBAL.BaseUrl+'/mobile/api/v1/Position.php?mode=getDispatchCity',
                {
                    params: {
                    },
                    jsonp:'callback'
                }
            ).then(function (res) {
                if(res.body.code==200){
                    this.one_time=res.body.data.punctual;
                    this.two_time=res.body.data.two_hours;
                    /*console.log(this.two_time[0])
                    console.log('------------------------------------------')*/
                  /*  console.log(res.body.data)*/
                }
            });

        },
        methods:{

            //选择两小时达
            get_two:function(index){
                let one=this.two_time[index];
                    this.$router.push('/unauthorized?one='+one)
            },
            //选择一小时达
            get_one:function(index){
                let two=this.two_time[index];
                this.$router.push('/unauthorized?two='+two)
            }


        }
    }
</script>
<style>
    .arrive_one_u1 li{
        width:1.16rem;
        height:0.5rem;
        border:0.01rem solid #cccccc;
        background:#f2f3f5;
        color:#9b9c9c;
        line-height:0.5rem;
        text-align:center;
        font-size:0.32rem;
        list-style:none;
        margin:0 0.18rem;
        margin-bottom:0.2rem;
    }
    .arrive_one_u1{
        width:100%;
        min-height:0.72rem;
        padding-top:0.2rem;
        display:flex;
        flex-wrap: wrap;
        margin-bottom:0.1rem;
    }
    .arrive_one_u li{
        width:1.16rem;
        height:0.5rem;
        border:0.01rem solid #cccccc;
        background:#f2f3f5;
        color:#9b9c9c;
        line-height:0.5rem;
        text-align:center;
        font-size:0.32rem;
        list-style:none;
        margin:0 0.18rem;
    }
    .arrive_one_u{
        width:100%;
        min-height:0.72rem;
       padding-top:0.2rem;
        display:flex;
        flex-wrap: wrap;
        border-bottom:0.1rem solid #f5f4f2;
        margin-bottom:0.1rem;
    }
    .p_one{
        width:100%;
        height:0.78rem;
        color:#007aff;
        font-size:0.26rem;
        line-height:0.78rem;
        text-indent: 0.2rem;
    }
    .p_two{
        width:100%;
        height:0.9rem;
        color:#007aff;
        font-size:0.26rem;
        line-height:0.9rem;
        text-indent: 0.2rem;
    }
</style>
